<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/home.css">
    <title>用户管理系统</title>
</head>

<body>
<div class="container-fluid">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">简单的用户管理系统</a>
        <div class="navbar-nav ml-auto">
            <div class="nav-item dropdown">
                <!-- 用户头像点击触发下拉框 -->
                <img src="${user.avatarAddress}" alt="用户头像" width="45" height="45" class="rounded-circle dropdown-toggle" id="userAvatar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span>${user.userName}</span>

                <!-- 下拉菜单 -->
                <div class="dropdown-menu" aria-labelledby="userAvatar">
                    <a class="dropdown-item" href="#" onclick="uploadAvatar()">上传头像</a>
                    <a class="dropdown-item" href="#" onclick="downloadAvatar()">下载头像</a>
                    <a class="dropdown-item" href="#" onclick="logout(event)">注销</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 主要内容区域 -->
    <div class="main-content">
        <div class="row">
            <!-- 左侧导航栏 -->
            <div class="sidebar">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">
                        <span><i class="fas fa-cogs"></i></span> 用户管理
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <span><i class="fas fa-users"></i></span> 系统管理（待开发中）
                    </a>
                </div>
            </div>
            <!-- 用户管理主要内容 -->
            <div class="col-md-9">
                <!-- 第一部分：搜索和筛选部分 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="loginName">昵称：</label>
                                <input type="text" class="form-control" id="loginName" placeholder="请输入登录名称">
                            </div>
                            <div class="form-group">
                                <label for="userStatus">用户状态：</label>
                                <select class="form-control" id="userStatus">
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">查询</button>
                        </form>
                    </div>
                </div>
                <!-- 第二部分：用户信息表格 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>用户 ID</th>
                                <th>账号</th>
                                <th>昵称</th>
                                <th>部门id</th>
                                <th>手机号</th>
                                <th>用户状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach var="user" items="${userList}">
                                <tr>
                                    <td>${user.userId}</td>
                                    <td>${user.userNumber}</td>
                                    <td>${user.userName}</td>
                                    <td>${user.deptId}</td>
                                    <td>${user.telephone}</td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${user.status == '0'}">
                                                <button class="btn btn-success btn-sm">启用</button>
                                            </c:when>
                                            <c:when test="${user.status == '1'}">
                                                <button class="btn btn-secondary btn-sm">禁止</button>
                                            </c:when>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-warning edit-btn" data-id="${user.userId}">修改</button>
                                            <button class="btn btn-sm btn-danger delete-btn" data-id="${user.userId}">删除</button>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
<%--                新增按钮--%>
                <div class="row mb-4">
                    <div class="col-md-12">
<%--                        <button class="btn btn-sm btn-primary">新增用户</button>--%>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addUserModal">
                                新增用户
                            </button>
                    </div>
                </div>
                <!-- 第三部分：分页导航 -->
                <div class="row">
                    <c:choose>
                        <c:when test="${totalPages > 1}">
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <!-- 上一页按钮 -->
                                    <c:if test="${currentPage > 1}">
                                        <li class="page-item">
                                            <a class="page-link" href="userListServlet?startIndex=${(currentPage - 2) * targetTotal}&targetTotal=${targetTotal}" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <!-- 动态生成页码 -->
                                    <c:forEach var="i" begin="1" end="${totalPages}">
                                        <c:choose>
                                            <c:when test="${i <= 3 || (i > currentPage - 2 && i < currentPage + 2) || i == totalPages}">
                                                <li class="page-item <c:if test="${i == currentPage}">active</c:if>">
                                                    <a class="page-link" href="userListServlet?startIndex=${(i - 1) * targetTotal}&targetTotal=${targetTotal}">${i}</a>
                                                </li>
                                            </c:when>
                                            <c:otherwise>
                                                <!-- 在需要的地方显示 "..." -->
                                                <li class="page-item disabled">
                                                    <span class="page-link">...</span>
                                                </li>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                    <!-- 下一页按钮 -->
                                    <c:if test="${currentPage < totalPages}">
                                        <li class="page-item">
                                            <a class="page-link" href="userListServlet?startIndex=${currentPage * targetTotal}&targetTotal=${targetTotal}" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                </ul>
                            </nav>
                        </c:when>
                        <c:otherwise>
                            <!-- 如果只有一页数据，不显示分页 -->
                            <p>No pages to show.</p>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
    </div>

<%--    新增按钮模态框区--%>
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addUserModalLabel">新增用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 新增用户表单 -->
                    <form id="addUserForm">
                        <div class="form-group">
                            <label for="userNumber">账号</label>
                            <input type="text" class="form-control" id="userNumber" name="userNumber" required>
                        </div>
                        <div class="form-group">
                            <label for="nickName">昵称</label>
                            <input type="text" class="form-control" id="nickName" name="nickName" required>
                        </div>
                        <div class="form-group">
                            <label for="telephone">手机号</label>
                            <input type="text" class="form-control" id="telephone" name="telephone">
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" name="password">
                        </div>
                        <!-- 文件上传 -->
                        <div class="form-group">
                            <label for="avatar">头像</label>
                            <input type="file" class="form-control-file" id="avatar" name="avatar">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitAddUser">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 提示框 -->
    <div id="alertMessage" class="alert alert-success" style="display:none;" role="alert">
        用户新增成功！
    </div>
    <div id="errorMessage" class="alert alert-danger" style="display:none;" role="alert">
        用户新增失败，请重试！
    </div>

    <!-- 修改用户信息模态框 -->
    <div class="modal" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editUserModalLabel">修改用户信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editUserForm">
<%--                        隐藏用户id，不让客户端修改--%>
                        <div class="form-group" style="display: none;">
                            <label for="userNumber">用户id</label>
                            <input type="text" class="form-control" id="userId">
                        </div>
                        <div class="form-group">
                            <label for="userNumber">账号</label>
                            <input type="text" class="form-control" id="userNumber2">
                        </div>
                        <div class="form-group">
                            <label for="userName">昵称</label>
                            <input type="text" class="form-control" id="userName">
                        </div>
                        <div class="form-group">
                            <label for="deptId">部门 ID</label>
                            <input type="text" class="form-control" id="deptId">
                        </div>
                        <div class="form-group">
                            <label for="telephone">手机号</label>
                            <input type="text" class="form-control" id="telephone2">
                        </div>
                        <div class="form-group">
                            <label for="status">状态</label>
                            <select class="form-control" id="status">
                                <option value="active">启用</option>
                                <option value="inactive">禁用</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">保存修改</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示框 -->
    <div id="editUserMsg" class="alert alert-success" style="display:none"></div>

</div>


<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/home.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</body>

</html>
